import React, { useState, useEffect } from 'react';
import './SkinChangeModal.css';

interface SkinOption {
    id: string;
    name: string;
    color: string;
}

interface SkinChangeModalProps {
    isOpen: boolean;
    onClose: () => void;
    currentClothingSkin: string;
    currentPantsSkin: string;
    currentShoesSkin: string;
    currentHairSkin: string;
    availableSkins: SkinOption[];
    onClothingSkinChange: (skinId: string) => void;
    onPantsSkinChange: (skinId: string) => void;
    onShoesSkinChange: (skinId: string) => void;
    onHairSkinChange: (skinId: string) => void;
    onApplyClothingSkin: (skinId: string) => void;
    onApplyPantsSkin: (skinId: string) => void;
    onApplyShoesSkin: (skinId: string) => void;
    onApplyHairSkin: (skinId: string) => void;
}

const SkinChangeModal: React.FC<SkinChangeModalProps> = ({
    isOpen,
    onClose,
    currentClothingSkin,
    currentPantsSkin,
    currentShoesSkin,
    currentHairSkin,
    availableSkins,
    onClothingSkinChange,
    onPantsSkinChange,
    onShoesSkinChange,
    onHairSkinChange,
    onApplyClothingSkin,
    onApplyPantsSkin,
    onApplyShoesSkin,
    onApplyHairSkin
}) => {
    const [previewClothingSkin, setPreviewClothingSkin] = useState(currentClothingSkin);
    const [previewPantsSkin, setPreviewPantsSkin] = useState(currentPantsSkin);
    const [previewShoesSkin, setPreviewShoesSkin] = useState(currentShoesSkin);
    const [previewHairSkin, setPreviewHairSkin] = useState(currentHairSkin);
    const [originalClothingSkin, setOriginalClothingSkin] = useState(currentClothingSkin);
    const [originalPantsSkin, setOriginalPantsSkin] = useState(currentPantsSkin);
    const [originalShoesSkin, setOriginalShoesSkin] = useState(currentShoesSkin);
    const [originalHairSkin, setOriginalHairSkin] = useState(currentHairSkin);

    // 当弹框打开时，记录原始皮肤
    useEffect(() => {
        if (isOpen) {
            setOriginalClothingSkin(currentClothingSkin);
            setOriginalPantsSkin(currentPantsSkin);
            setOriginalShoesSkin(currentShoesSkin);
            setOriginalHairSkin(currentHairSkin);
            setPreviewClothingSkin(currentClothingSkin);
            setPreviewPantsSkin(currentPantsSkin);
            setPreviewShoesSkin(currentShoesSkin);
            setPreviewHairSkin(currentHairSkin);
        }
    }, [isOpen, currentClothingSkin, currentPantsSkin, currentShoesSkin, currentHairSkin]);

    // 处理衣服皮肤预览
    const handleClothingPreview = (skinId: string) => {
        setPreviewClothingSkin(skinId);
        onClothingSkinChange(skinId);
    };

    // 处理裤子皮肤预览
    const handlePantsPreview = (skinId: string) => {
        setPreviewPantsSkin(skinId);
        onPantsSkinChange(skinId);
    };

    // 处理鞋子皮肤预览
    const handleShoesPreview = (skinId: string) => {
        setPreviewShoesSkin(skinId);
        onShoesSkinChange(skinId);
    };

    // 处理头发皮肤预览
    const handleHairPreview = (skinId: string) => {
        setPreviewHairSkin(skinId);
        onHairSkinChange(skinId);
    };

    // 处理确认换肤
    const handleApplySkin = () => {
        onApplyClothingSkin(previewClothingSkin);
        onApplyPantsSkin(previewPantsSkin);
        onApplyShoesSkin(previewShoesSkin);
        onApplyHairSkin(previewHairSkin);
        onClose();
    };

    // 处理取消换肤
    const handleCancelSkin = () => {
        onClothingSkinChange(originalClothingSkin);
        onPantsSkinChange(originalPantsSkin);
        onShoesSkinChange(originalShoesSkin);
        onHairSkinChange(originalHairSkin);
        setPreviewClothingSkin(originalClothingSkin);
        setPreviewPantsSkin(originalPantsSkin);
        setPreviewShoesSkin(originalShoesSkin);
        setPreviewHairSkin(originalHairSkin);
        onClose();
    };

    // 处理恢复原始颜色
    const handleRestoreOriginal = () => {
        setPreviewClothingSkin(originalClothingSkin);
        setPreviewPantsSkin(originalPantsSkin);
        setPreviewShoesSkin(originalShoesSkin);
        setPreviewHairSkin(originalHairSkin);
        onClothingSkinChange(originalClothingSkin);
        onPantsSkinChange(originalPantsSkin);
        onShoesSkinChange(originalShoesSkin);
        onHairSkinChange(originalHairSkin);
    };

    if (!isOpen) return null;

    return (
        <div className="skin-modal-overlay">
            <div className="skin-modal">
                <div className="skin-modal-header">
                    <h3>🎨 换肤设置</h3>
                    <button className="skin-modal-close" onClick={handleCancelSkin}>
                        ✕
                    </button>
                </div>

                <div className="skin-modal-content">
                    {/* 衣服换肤区域 */}
                    <div className="skin-section">
                        <h4>👕 衣服换肤</h4>
                        <div className="skin-status">
                            <div className="skin-status-item">
                                <span className="skin-status-label">原始:</span>
                                <div
                                    className="skin-color-preview"
                                    style={{ backgroundColor: availableSkins.find(s => s.id === originalClothingSkin)?.color }}
                                />
                                <span className="skin-status-name">
                                    {availableSkins.find(s => s.id === originalClothingSkin)?.name}
                                </span>
                            </div>
                            <div className="skin-status-item">
                                <span className="skin-status-label">预览:</span>
                                <div
                                    className="skin-color-preview"
                                    style={{ backgroundColor: availableSkins.find(s => s.id === previewClothingSkin)?.color }}
                                />
                                <span className="skin-status-name">
                                    {availableSkins.find(s => s.id === previewClothingSkin)?.name}
                                </span>
                            </div>
                        </div>
                        <div className="skin-color-grid">
                            {availableSkins.map((skin) => (
                                <div
                                    key={skin.id}
                                    className={`skin-color-option ${previewClothingSkin === skin.id ? 'selected' : ''}`}
                                    onClick={() => handleClothingPreview(skin.id)}
                                    title={skin.name}
                                >
                                    <div
                                        className="skin-color-circle"
                                        style={{ backgroundColor: skin.color }}
                                    />
                                    <span className="skin-color-name">{skin.name}</span>
                                </div>
                            ))}
                        </div>
                    </div>

                    {/* 裤子换肤区域 */}
                    <div className="skin-section">
                        <h4>👖 裤子换肤</h4>
                        <div className="skin-status">
                            <div className="skin-status-item">
                                <span className="skin-status-label">原始:</span>
                                <div
                                    className="skin-color-preview"
                                    style={{ backgroundColor: availableSkins.find(s => s.id === originalPantsSkin)?.color }}
                                />
                                <span className="skin-status-name">
                                    {availableSkins.find(s => s.id === originalPantsSkin)?.name}
                                </span>
                            </div>
                            <div className="skin-status-item">
                                <span className="skin-status-label">预览:</span>
                                <div
                                    className="skin-color-preview"
                                    style={{ backgroundColor: availableSkins.find(s => s.id === previewPantsSkin)?.color }}
                                />
                                <span className="skin-status-name">
                                    {availableSkins.find(s => s.id === previewPantsSkin)?.name}
                                </span>
                            </div>
                        </div>
                        <div className="skin-color-grid">
                            {availableSkins.map((skin) => (
                                <div
                                    key={skin.id}
                                    className={`skin-color-option ${previewPantsSkin === skin.id ? 'selected' : ''}`}
                                    onClick={() => handlePantsPreview(skin.id)}
                                    title={skin.name}
                                >
                                    <div
                                        className="skin-color-circle"
                                        style={{ backgroundColor: skin.color }}
                                    />
                                    <span className="skin-color-name">{skin.name}</span>
                                </div>
                            ))}
                        </div>
                    </div>

                    {/* 鞋子换肤区域 */}
                    <div className="skin-section">
                        <h4>👟 鞋子换肤</h4>
                        <div className="skin-status">
                            <div className="skin-status-item">
                                <span className="skin-status-label">原始:</span>
                                <div
                                    className="skin-color-preview"
                                    style={{ backgroundColor: availableSkins.find(s => s.id === originalShoesSkin)?.color }}
                                />
                                <span className="skin-status-name">
                                    {availableSkins.find(s => s.id === originalShoesSkin)?.name}
                                </span>
                            </div>
                            <div className="skin-status-item">
                                <span className="skin-status-label">预览:</span>
                                <div
                                    className="skin-color-preview"
                                    style={{ backgroundColor: availableSkins.find(s => s.id === previewShoesSkin)?.color }}
                                />
                                <span className="skin-status-name">
                                    {availableSkins.find(s => s.id === previewShoesSkin)?.name}
                                </span>
                            </div>
                        </div>
                        <div className="skin-color-grid">
                            {availableSkins.map((skin) => (
                                <div
                                    key={skin.id}
                                    className={`skin-color-option ${previewShoesSkin === skin.id ? 'selected' : ''}`}
                                    onClick={() => handleShoesPreview(skin.id)}
                                    title={skin.name}
                                >
                                    <div
                                        className="skin-color-circle"
                                        style={{ backgroundColor: skin.color }}
                                    />
                                    <span className="skin-color-name">{skin.name}</span>
                                </div>
                            ))}
                        </div>
                    </div>

                    {/* 头发换肤区域 */}
                    <div className="skin-section">
                        <h4>💇 头发换肤</h4>
                        <div className="skin-status">
                            <div className="skin-status-item">
                                <span className="skin-status-label">原始:</span>
                                <div
                                    className="skin-color-preview"
                                    style={{ backgroundColor: availableSkins.find(s => s.id === originalHairSkin)?.color }}
                                />
                                <span className="skin-status-name">
                                    {availableSkins.find(s => s.id === originalHairSkin)?.name}
                                </span>
                            </div>
                            <div className="skin-status-item">
                                <span className="skin-status-label">预览:</span>
                                <div
                                    className="skin-color-preview"
                                    style={{ backgroundColor: availableSkins.find(s => s.id === previewHairSkin)?.color }}
                                />
                                <span className="skin-status-name">
                                    {availableSkins.find(s => s.id === previewHairSkin)?.name}
                                </span>
                            </div>
                        </div>
                        <div className="skin-color-grid">
                            {availableSkins.map((skin) => (
                                <div
                                    key={skin.id}
                                    className={`skin-color-option ${previewHairSkin === skin.id ? 'selected' : ''}`}
                                    onClick={() => handleHairPreview(skin.id)}
                                    title={skin.name}
                                >
                                    <div
                                        className="skin-color-circle"
                                        style={{ backgroundColor: skin.color }}
                                    />
                                    <span className="skin-color-name">{skin.name}</span>
                                </div>
                            ))}
                        </div>
                    </div>

                    {/* 操作按钮 */}
                    <div className="skin-modal-actions">
                        <button
                            className="skin-btn skin-btn-restore"
                            onClick={handleRestoreOriginal}
                            disabled={previewClothingSkin === originalClothingSkin && previewPantsSkin === originalPantsSkin && previewShoesSkin === originalShoesSkin && previewHairSkin === originalHairSkin}
                        >
                            🔄 恢复原始
                        </button>
                        <div className="skin-btn-group">
                            <button
                                className="skin-btn skin-btn-cancel"
                                onClick={handleCancelSkin}
                            >
                                取消
                            </button>
                            <button
                                className="skin-btn skin-btn-apply"
                                onClick={handleApplySkin}
                                disabled={previewClothingSkin === currentClothingSkin && previewPantsSkin === currentPantsSkin && previewShoesSkin === currentShoesSkin && previewHairSkin === currentHairSkin}
                            >
                                确认换肤
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default SkinChangeModal;
